<template>
    <div class="box" ref="box">
      <div class="swiper-container ">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
            <img :src="catedetails.voucherCoverImg" alt="">
        </swiper-slide>
      </swiper>
    </div>
     <p class="name">{{catedetails.voucherName}}</p>
     <!-- <p class="line"><span class="l">还剩{{catedetails.remainDays}}天(<span>至{{catedetails.endDate}}到期</span>)</span></p> -->
          <p class="line"><span class="l"><span>至{{catedetails.endDate}}到期</span></span></p>
     <div class="mone">
           <p>购买金额：<span class="colos">{{catedetails.integral}}积分+{{catedetails.salePrice}}元</span></p>
           <p><span>购买时间：<span>{{catedetails.giveDate}}</span></span>
               <span v-if="catedetails.status == '1'">(已使用)</span>
               <span v-if="catedetails.status == '2'">(已过期)</span>
           </p>
     </div>
     <div class="grayline"></div>
      <div class="quan">
       <div class="img">
          <div class="left">
            <p>券码</p>
            <p>{{catedetails.voucherNumber}}</p>
            <span class="fu" v-clipboard:copy="catedetails.voucherNumber" @click="clone">复制</span>
          </div>
          <div class="right">
            <p></p>
          </div>
       </div>
     </div>
     <!-- <div class="gray_line"></div> -->
      <!-- <p class="colos">商品简介</p> -->
      <!-- <div class="details">{{catedetails.productDetails}}
      </div> -->
      <p class="ft">兑换规则</p>
      <div class="details" v-html="catedetails.productDetails" ref="details"></div>
      <div class="buttonbox" ref="buttonbox" @click="gohome" >
        返回首页
      </div>
       <p style="height:80px"></p>
    </div>
</template>
<script>
// 1实物 2彩票 3券
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {queryOrderDetails,queryUserVoucherDetails} from "src/methods/request.js";
import {formats,formatint} from "src/methods/synchronous.js";
export default{
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // loop : true,
        // clickable :true,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination"
        }
      },
      catedetails: {},
      route: {}
    };
  },
  computed: {
    imgUrl() {
      return this.$store._modules.root._children.a.state;
    }
  },
  created() {
    // $router 直接监听无效，尚未查明，故作深拷贝处理
    this.route = Object.assign({}, this.$route);
  },
  updated() {
    let imgs = this.$refs.details.getElementsByTagName("img");
    let strong = this.$refs.details.getElementsByTagName("strong");
    let lis = this.$refs.details.getElementsByTagName("li");
    if(imgs.length!=0){
          for(let item of imgs){
              item.style.width ="100%"
              item.style.marginTop = '-7px';
          }
    }
    if(strong.length!=0){
         for(let item of strong){
        item.style.fontWeight ="bold"
     }
    }
     if(lis.length!=0){
         for(let item of lis){
        item.style.marginLeft ="18px"
     }
    }
  },
  methods:{
    gohome(){
       this.$router.push({
          path:"/"
        })
    },
    getprodetail(){
        let routerParams = this.route.query.orderNo;
         // 发送请求数据
          queryUserVoucherDetails({id: routerParams}).then(
                response => {
                      this.catedetails = Object.assign({}, response.data.userVoucher)
                      this.catedetails.voucherCoverImg = this.imgUrl +this.catedetails.voucherCoverImg;
                      this.Integral =this.catedetails.Integral;
                      this.catedetails.giveDate= formats(this.catedetails.giveDate)
                      this.catedetails.endDate= formats(this.catedetails.endDate)

              }
           ).catch(
               error => console.log(error)
           );
    },
    clone(){
       this.$Toast({message:'复制成功'});
    }



  },
    watch: {
    'route' () {
      if (this.route.path == "/orderIntergraDetail") {
        this.getprodetail();
      }
    }
  }

}

</script>
<style lang="less" scoped>

.box{
   position: fixed;
      top: 46px;
      width: 100%;
      height: 100%;
      overflow-x:auto;
      .grayline{
        height:10px;
        background-color: #f1f2f3;
      }
      .ft{
        color:#ED6E36;
      }
      .quan{
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        .img{
          width: 260px;
          height: 102px;
          background:url(./../../assets/commoditydetails_ticket.png@2x.png) no-repeat;
          background-size: contain;
          div.left{
            width: 180px;
            height: 102px;
            padding-left: 16px;
            box-sizing: border-box;
            padding-top: 11px;
            float: left;
            color:rgba(238, 226, 226, 0.973);
            P{
              height: 16px;
              line-height: 20px;
              color:rgba(238, 226, 226, 0.973);

            }
            p:nth-child(2){
               padding-top: 6px;
              font-size: 18px;
              height: 40px;
              color:#fff
            }
           .fu{
             font-size: 12px;
              height: 20px;
              line-height: 20px;
              text-align: right;
              box-sizing: border-box;
              background: #fff;
              color: #ED6E36;
              padding: 2px 15px;
              border-radius: 50px;
              margin-left: 70px;
            }
          }
          div.right{
            width: 50px;
            height: 102px;
            float: left;
            p{
              margin-left: 10px;
              padding-top: 5px;
              width: 20px;
              height: 102px;
              line-height: 18px;
              color:rgba(238, 226, 226, 0.973);
            }
          }
        }
      }
  .swiper-container {
    height: 220px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 220px;
      box-sizing: border-box;
    }
    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal > .swiper-pagination-bullets {
      bottom: 20px;
      left: 0;
      width: 100%;
    }
    // .swiper-pagination-bullet-active {
    //      swiper 283行
    // }
  }
  .mone{
    height:80px;
    padding:15px 4.5% 0 4.5%;
    box-sizing: border-box;
    text-align: left;
    border-bottom: 1px solid  #f1f0f0;
    font-size: 14px;
    p{
      padding: 0;
      height:25px;
      line-height: 25px;
    }
    p:nth-child(2){
      span:nth-child(1){
       span{
          color:#8e8e93;
       }
      }
    }
  }
  .colos{
    color: #ED6E36
  }
  .line{
    .l{
       width: 100%;
       display: inline-block;
       border-bottom: 1px solid  #f1f0f0;
       span{
         color:#8e8e93;
       }
    }
  }
  p{
    padding-left: 4.5%;
    padding-right: 4.5%;
    box-sizing: border-box;
    text-align: left;
    word-break:break-all;
    letter-spacing: 0px;
    height: 45px;
    display: flex;
    line-height: 45px;
    color: black;

  }

  div.details{
    padding-left: 4.5%;
    box-sizing: border-box;
    text-align: left;
    word-break:break-all;
    letter-spacing: 0px;
    min-height: 100px;
  }
  .name{
    font-weight: bold;
    font-size:19px;
  }
  .color{
    font-size: 19px;
    color:#ED6E36;
  }
  .gray_line{
      width: 100%;
      height: 0.5rem;
      background-color: #f1f2f3;
    }
   .buttonbox{
    margin-top: 20px;
    margin-left: 4.5%;
    width: 91%;
    color:#fff;
    height: 40px;
    background-color:#ED6E36;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    }
  .bgcolor{
    background-color: #E5E5E5;
  }
}

</style>

